import React from 'react';
import {View, Text, Button, Image} from 'react-native';
import {createStackNavigator} from 'react-navigation';
import NetInfoDecorator from "./utils/NetInfoDecorator";

class LogoTitle extends React.Component {
    render() {
        return (
            <Image
                source={require('./spiro.png')}
                style={{width: 30, height: 30}}
            />
        );
    }
}

class HomeScreen extends React.Component {
    static navigationOptions = ({navigation}) => {
        const params = navigation.state.params || {};

        return {
            headerTitle: <LogoTitle/>,
            headerRight: (
                <Button onPress={params.increaseCount} title="+1" color="#fff"/>
            ),
            headerLeft: (
                <Button
                    onPress={() => navigation.navigate('MyModal')}
                    title="Info"
                    color="#fff"
                />
            ),
        };
    };

    componentWillMount() {
    }

    state = {
        count: 0,
    };

    _increaseCount = () => {
        this.setState({count: this.state.count + 1});
    };

    componentDidMount() {
        this.props.navigation.setParams({increaseCount: this._increaseCount});

        console.log('HomeScreen', 'componentDidMount')
    }

    componentWillUnmount() {
        console.log('HomeScreen', 'componentWillUnmount')
    }

    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>HomeScreen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
        );
    }
}

class ModalScreen extends React.PureComponent {



    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'transparent'}}>
                <Text style={{fontSize: 30}}>This is a modal!</Text>
                <Button
                    onPress={() => this.props.navigation.goBack()}
                    title="Dismiss"
                />
            </View>
        );
    }
}

@NetInfoDecorator
class DetailsScreen extends React.Component {
    static navigationOptions = {
        title: 'Details',
    };

    componentDidMount() {
        console.log('DetailsScreen', 'componentDidMount');

    }

    componentWillReceiveProps(nextProps){
        console.log('DetailsScreen nextProps',nextProps.isConnected);
        setTimeout(()=>{
            !nextProps.isConnected&&this.props.navigation.navigate('MyModal')
        },1000);
    }

    componentWillUnmount() {
        console.log('DetailsScreen', 'componentWillUnmount')
    }

    render() {
        console.log('DetailsScreen render',this.props);
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text>Details Screen</Text>
                <Button
                    title="Go to Details... again"
                    onPress={() => this.props.navigation.push('Details')}
                />
                <Button
                    title="Go to Home"
                    onPress={() => this.props.navigation.navigate('Home')}
                />
                <Button
                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />
                <Button
                    title="Go back 3 screen"
                    onPress={() => this.props.navigation.pop(3)}
                />
                <Button
                    title="show modal"
                    onPress={() => this.props.navigation.push('MyModal')}
                />
            </View>
        );
    }
}

const MainStack = createStackNavigator(
    {
        Home: HomeScreen,
        Details: DetailsScreen,
    },
    {
        initialRouteName: 'Home',
        /* The header config from HomeScreen is now here */
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    }
);

const RootStack = createStackNavigator(
    {
        Main: {
            screen: MainStack,
        },
        MyModal: {
            screen: ModalScreen,
        },
    },
    {
        headerMode: 'none',
    }
);

export default class AppWithModal extends React.Component {
    render() {
        return <RootStack/>;
    }
}

console.disableYellowBox = true;
